<template>
    <div class="wrap">
        <Header :tap="title"/>
       <div class="newList">
           <div class="newItem" v-for="item in newArr" :key="item.id" @click="newDetail(item.id)">
               <div class="pic_left">
                   <img :src="item.img" alt="">
               </div>
               <div class="conten-right">
                   <div class="title">
                       {{item.title}}
                   </div>
                   <div class="content">
                       {{item.content}}
                   </div>
                   <div class="post_time">
                       {{item.time | convertDate}}
                   </div>
               </div>
           </div>
       </div>

       <Footer />
        
    </div>
</template>
<script>
import Header from "./commons/header.vue";
import Footer from "./commons/footer.vue";
export default {
  data() {
    return {
      title: "新闻资讯",
      newArr: [
        {
          id: 1,
          img: "../images/8.jpg",
          title: "标题1",
          content: "内容1",
          time: "2017-01-02 12:30:44"
        },
        {
          id: 2,
          img: "../images/55st.png",
          title: "标题2",
          content: "内容2",
          time: "2017-02-02 14:20:14"
        },
        {
          id: 3,
          img: "../images/106st.png",
          title: "标题3",
          content: "内容3",
          time: "2017-03-02 9:20:16"
        }
      ]
    };
  },
  methods: {
    newDetail(id) {
      this.$router.push("/home/newsInformation/newDetail/" + id);
    }
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style scoped>
.newItem {
  background-color: #fff;
  display: flex;
  margin-bottom: 5px;
}
.newItem .pic_left {
  flex: 1;
}
.newItem .conten-right {
  flex: 2;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.pic_left img {
  width: 100%;
}
</style>


